<template>
	<view>
		<u-popup :show="faultBottom" mode="bottom"  @close="close" @open="open">
			<view class="poput-box">
				<view class="poput-title">
					<view class="poput-title-text">
						选择故障类型
					</view>
					<view>
						<uni-icons class="poput-title-icon" @click="closePopup" type="closeempty" size="20"></uni-icons>
					</view>
				</view>
				<view class="fault-state">
					<view class="fault-state-item">
						机器不通电
					</view>
					<view class="fault-state-item">
						机器不通电
					</view>
					<view class="fault-state-item">
						机器不通电
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props:['faultBottom'],
		data() {
			return {
				intelligence:"",
				defaultAddress:"",
				showSex: false,
				model1: {
					userInfo: {
						name: 'uView UI',
						sex: '',
					},
				},
				actions: [{
					name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false
			}
		},
		methods: {
			change(e) {
				console.log('change', e);
			},
			closePopup(){
				this.$emit('child-fault', false);
			},
			sexSelect(e) 
			{
				this.model1.userInfo.sex = e.name
				this.$refs.uForm.validateField('userInfo.sex')
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		}
	}
</script>

<style lang="scss" scoped>
	.fault-state-item-selected{
		border: 1rpx solid dodgerblue;
		color:dodgerblue;
	}
	.fault-state-item{
		width: 45.8%;
		box-sizing: border-box;
		background-color: gainsboro;
		padding:20rpx;
		margin: 15rpx;
		text-align: center;
	}
	.fault-state{
		display: flex;
		flex-wrap: wrap;
	}
	.poput-list-left{
		display: flex;
	}
	.poput-list{
		margin: 20rpx 20rpx 0rpx 20rpx;
		height: 20rpx;
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.poput-title-icon{
		position: absolute;
		right:25rpx;
		top:25rpx;
	}
	.poput-box{
		border-radius: 15rpx 15rpx 0rpx 0rpx;
		height: 800rpx;
		position: relative;
	}
	.poput-title-text{
		text-align: center;
		font-size: 30rpx;
	}
	.poput-title{
		padding: 20rpx;
	}
</style>
